<template>
    <div class="modal fade" id="cusPreDetailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 1300px;">
            <div class="modal-content" style="width: 1300px;">
                <div class="modal-header">
                    <button type="button" class="close" @click="canel"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">报备详情</h4>
                </div>
                <div class="modal-body">
                    <div class="main-content">
                        <div style="padding:20px;">
                            <ul style="margin-bottom:20px">
                                <li>
                                    <font>当前状态：</font>{{currentStatus}}</li>
                            </ul>
                            <ul class="custom_list clearfix">
                                <!-- <#list followStatus as up>-->
                                <li :class="{active:item.isActive}" v-for="(item,index) in customerArray" :key="index">
                                    <div class="cut_line" :class="{'cut_line_fail':item.state}">
                                        <span></span>
                                    </div>
                                    <div class="cut_lin" :class="{'cut_lin_fail':item.state}" v-if="item.name !='结佣'"></div>
                                    <p class="cut_title">{{item.name}}</p>
                                </li>
                                <!-- </#list>-->
                            </ul>
                        </div>
                        <!-- <div class="concent_title">
                            <span></span>
                            <p>报备详情</p>
                            <hr>
                        </div> -->
                        <div class="concent_title" >
                            <span></span>
                            <p>楼盘信息</p>
                            <hr>
                            <ul class="info_list">
                                <li>
                                    <p>楼盘名称:</p>
                                    <font>{{cusPre.premisesName}}</font>
                                    <b><a v-on:click="premisesDetail()" ><b style="color:blue;">查看楼盘详情</b></a>
                                    </b>
                                </li>
                                <li>
                                    <p>楼盘佣金:</p>
                                    <font>{{cusPre.commissionAmount}}</font>
                                </li>
                                <li>
                                    <p>带看奖:</p>
                                    <font>{{cusPre.reward}}&nbsp;元</font>
                                </li>
                                <li>
                                    <p>{{cusPre.dealType == 2?'现金奖':'成交奖'}}:</p>
                                    <font>{{cusPre.dealAward}}&nbsp;元</font>
                                </li>
                            </ul>
                        </div>
                        <div class="concent_title">
                            <span></span>
                            <p>经纪人信息</p>
                            <hr>
                            <ul class="info_list">
                                <li>
                                    <p>报备类型:</p>
                                    <font>{{cusPre.reportType}}</font>
                                </li>
                                <li>
                                    <p>经纪人:</p>
                                    <font>{{cusPre.staffName}}</font>
                                </li>
                                <li>
                                    <p>所属公司 - 部门:</p>
                                    <font>{{cusPre.staffCompanyName}}&nbsp;-&nbsp;{{cusPre.staffDepartmentName}}</font>
                                </li>
                                <li v-if="cusPre.reportType=='案场代报备'">
                                    <p>报备人:</p>
                                    <font>{{cusPre.assistantName}}</font>
                                </li>
                                <li>
                                    <p>渠道经理:</p>
                                    <font>{{cusPre.principalName}}</font>
                                </li>
                            </ul>
                        </div>
                        <br>
                        <div class="concent_title">
                            <span></span>
                            <div>
                                <p style="float: left;">客户信息</p>
                                <p v-if="showCustomerInfo" style="font-weight:bold; float: right; padding-right: 20px;" @click="toCustomerInfo">更多信息 ></p>
                            </div>
                            <hr>
                            <ul class="info_list">
                                <li>
                                    <p>客户:</p>
                                    <font>{{cusPre.name}}&nbsp;&nbsp;{{cusPre.genderCN}}</font>
                                </li>
                                <li>
                                    <p>客户电话:</p>
                                    <font>{{cusPre.mobile}}</font>
                                </li>
                                <li v-if="signature">
                                    <p>认购信息:</p>
                                    <font>
                                        楼栋号 {{cusPre.buildingName}}&nbsp;
                                        房间号 {{cusPre.roomName}}
                                        认购金额 {{cusPre.signatureAmount}}元
                                    </font>
                                </li>
                                <li v-if="sign">
                                    <p>签约信息:</p>
                                    <font>
                                        楼栋号 {{cusPre.buildingName}}&nbsp;
                                        房间号 {{cusPre.roomName}}
                                        计价面积 {{cusPre.valuationArea}}m²
                                        成交金额{{cusPre.dealAmount}}元
                                    </font>
                                </li>
                            </ul>
                        </div>
                        <div class="concent_title">
                                <span></span>
                                <p>其他信息</p>
                                <hr>
                                <ul class="info_list">
                                    <li>
                                        <p>{{cusPre.visitTime?'到访时间：':'预计到场时间：'}}</p>
                                        <font>{{cusPre.visitTime||cusPre.hopeVisitTime || ''}}</font>
                                    </li>
                                    <li>
                                        <p>到场方式:</p>
                                        <font>{{ visitWay}}</font>
                                    </li>
                                    <li>
                                        <p>备注：</p>
                                        <font>{{remark}}</font>
                                    </li>
                                    <li>
                                        <p>报备推荐人：</p>
                                        <font>{{cusPre.recommenderName ? cusPre.recommenderName : '无'}}</font>
                                    </li>
                                    <li v-if="estateAdviser && estateAdviser.adviserUuid">
                                        <p>置业顾问：</p>
                                        <samp>{{estateAdviser.name}} &emsp; {{estateAdviser.phone}}</samp>
                                    </li>
                                </ul>
                        </div>
                        <div class="concent_title" style="width: 1220px;min-height: 210px;">
                            <span></span>
                            <p>首付信息</p>
                            <hr>
                            <ul class="info_list">
                                <li>
                                    <p>首付总金额:</p>
                                    <font>{{cusPre.firstPayment}}元</font>
                                </li>
                                <li>
                                    <p>首付总比例:</p>
                                    <font>{{ cusPre.firstPaymentRatio}}%</font>
                                </li>
                                <li>
                                    <p>是否交齐:</p>
                                    <font>{{cusPre.payFinish==='0'?'否':cusPre.payFinish==='1'?'是':''}}</font>
                                </li>
                                <li>
                                    <p>附件:</p>
                                    <font>
                                        <ul class="clearfix" id="declareIamge" style="margin-top:6px">
                                            <li v-for="(item, index) in cusPre.affixList" :key="index" class="declare-follow-list">
                                                <img v-img:index :src="item.url" v-if="item.fileType.toLowerCase() =='png'
											|| item.fileType.toLowerCase() =='jpg'
											|| item.fileType.toLowerCase() =='jpeg'
											|| item.fileType.toLowerCase() =='gif'" />
                                                <div width="100%" height="100%" class="pic-bg-fj" v-else></div>
                                                <div class="mask-page" v-if="item.fileType.toLowerCase() !='png'
											&& item.fileType.toLowerCase() !='jpg'
											&& item.fileType.toLowerCase() !='jpeg'
											&& item.fileType.toLowerCase() !='gif'"></div>
                                                <div class="operation-btn" v-if="item.fileType.toLowerCase() !='png'
											&& item.fileType.toLowerCase() !='jpg'
											&& item.fileType.toLowerCase() !='jpeg'
											&& item.fileType.toLowerCase() !='gif'">
                                                    <a href="javascript:;" @click="transformationBase(item.url,item.fileType)">下载</a>
                                                </div>
                                            </li>
                                        </ul>
                                    </font>
                                </li>
                            </ul>
                        </div>
                        <div class="clearfix"></div>
                        <div class="concent_title" style="width: 1220px;min-height: 210px;">
                            <span></span>
                            <p>跟进详情</p>
                            <hr>
                            <div class="custom_gj">
                                <div class="cu_gj_con">
                                    <div class="cu_gj_pot"></div>
                                    <!-- <p>${follow.createTime?string("yyyy-MM-dd HH:mm:ss")}</p> -->
                                    <div class="cu_gj_text" v-for="(row, index) in listFlowUp" :key="index">
                                        <font>{{row.staffName}}&nbsp;&nbsp;{{row.createTime}}&nbsp;
                                            <div v-if="row.adviser" style="display:inline-block">置业顾问：【{{row.adviser}}】带看时间【{{row.visitTime}}】</div>
                                        </font>
                                        <font v-if="row.remark">备注：{{row.remark}}</font>
                                        <!-- <b>${follow.createTime?string("yyyy-MM-dd HH:mm:ss")}</b> -->
                                        <ul class="clearfix" id="declareIamge" style="margin-top:6px">
                                            <li v-for="(item, index) in row.affixList" :key="index" class="declare-follow-list">
                                                <img v-img:index :src="item.url" v-if="item.fileType.toLowerCase() =='png'
											|| item.fileType.toLowerCase() =='jpg'
											|| item.fileType.toLowerCase() =='jpeg'
											|| item.fileType.toLowerCase() =='gif'" />
                                                <div width="100%" height="100%" class="pic-bg-fj" v-else></div>
                                                <div class="mask-page" v-if="item.fileType.toLowerCase() !='png'
											&& item.fileType.toLowerCase() !='jpg'
											&& item.fileType.toLowerCase() !='jpeg'
											&& item.fileType.toLowerCase() !='gif'"></div>
                                                <div class="operation-btn" v-if="item.fileType.toLowerCase() !='png'
											&& item.fileType.toLowerCase() !='jpg'
											&& item.fileType.toLowerCase() !='jpeg'
											&& item.fileType.toLowerCase() !='gif'">
                                                    <a href="javascript:;" @click="transformationBase(item.url,item.fileType)">下载</a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="clearfix"></div>

                    </div>
                </div>
            </div>
        </div>
        <CustomerInfoModal :cusPre="cusPre" :estateAdviser="estateAdviser" :customerInfo="customerInfo" :repeatVisitFollow="repeatVisitFollow"></CustomerInfoModal>
    </div>
</template>

<script>
    import CustomerStatus from '../common/customerStatusComponents.vue'
    import CustomerInfoModal from './customerInfoModal.vue'
    import viewer from '../../assets/js/viewer.js'
    import {Service, Utils, Constant} from '../../js/base'
    export default {
        props: ["cusPreId"],
        data() {
            return {
                cusPre: {},
                estateAdviser: {},
                customerInfo: {},
                repeatVisitFollow: [],
                showCustomerInfo: false,
                isShow: false,
                listFlowUp: [],
                latitude: '',
                longitude: '',
                fileList: [],
                isSpecialShow: false,
                rewardFlag: false,
                currentStatus: '',
                roomNum: '认购房号:',
                customerArray: [{
                    name: '报备',
                    isActive: false,
                    state: false
                },
                    {
                        name: '到访',
                        isActive: false,
                        state: false
                    },
                    {
                        name: '认筹',
                        isActive: false,
                        state: false
                    },
                    {
                        name: '认购',
                        isActive: false,
                        state: false
                    },
                    {
                        name: '签约',
                        isActive: false,
                        state: false
                    },
                    {
                        name: '结佣',
                        isActive: false,
                        state: false
                    }
                ],
                visitTime: '',
                remark: '',
                visitWay: '',
                visitWayList: ["集体派车", "单独派车", "自驾"],
                signature:false,
                sign:false,
                id: ''
            }
        },
        mounted: function() {
            this.showCustomerInfo = Utils.showCustomerInfo();
        },
        components: {
            CustomerStatus,
            CustomerInfoModal
        },
        methods: {
            initData (cusPreId) {
                console.log(cusPreId);
                this.id = cusPreId;
                this.findCusPreimeseInfo();
                this.flowUpList();
            },
            transformationBase(data, type) {
                // 创建隐藏的可下载链接
                let eleLink = document.createElement('a')
                eleLink.download = ''
                eleLink.style.display = 'none'
                let value = type.toLowerCase()
                let str = ['jpeg', 'jpg', 'png', 'gif']
                if (str.indexOf(value) > -1) {
                    // 图片转base64地址
                    let Img = new Image()
                    Img.setAttribute('crossOrigin', 'anonymous')
                    Img.src = data
                    Img.onload = function() {
                        let canvas = document.createElement('canvas')
                        canvas.width = Img.width
                        canvas.height = Img.height
                        let ctx = canvas.getContext('2d')
                        ctx.drawImage(Img, 0, 0, Img.width, Img.height)
                        eleLink.href = canvas.toDataURL('image/' + value)
                        // 触发点击
                        document.body.appendChild(eleLink)
                        eleLink.click()
                        // 然后移除
                        document.body.removeChild(eleLink)
                    }
                } else {
                    window.open(data)
                }
            },
            findCusPreimeseInfo: function() {
                var _self = this;
                var initData = {
                    id: _self.id
                }
                var url = this.utilHelper.apiUrl + "/api/getCPDetail";
                var body = {};
                body.params = initData;
                _self.$http.post(url, body).then((response) => {
                    var body = response.body;
                    if (body.rewardFlag == "true") {
                        _self.rewardFlag = true;
                    }
                    _self.cusPre = body.resData.cpDto;
                    if (body.resData.reportVisit) {
                        _self.visitTime = body.resData.reportVisit.visitTime;
                        if (body.resData.reportVisit.visitWay) {
                            _self.visitWay = _self.visitWayList[Number(body.resData.reportVisit.visitWay)];
                        }
                        _self.remark = body.resData.reportVisit.remark
                    }
                    if (body.resData.estateAdviser) {
                        _self.estateAdviser = body.resData.estateAdviser;
                    }
                    _self.currentStatus = body.resData.cpDto.currentStatusMap.currentStatus
                    const length = body.resData.cpDto.currentStatusMap.index;
                    //设置亮灯个数
                    for (var i = 0; i < length; i++) {
                        _self.customerArray[i].isActive = true;
                    }
                    if(length>0){
                        _self.customerArray[length - 1]['state'] = body.resData.cpDto.currentStatusMap.value == '1' ? false : true;
                    }
                    if (length >= 5) {
                        _self.roomNum = '签约房号：'
                    }
                    if (length > 4) {
                        _self.isShow = true;
                    }

                    if(_self.cusPre.confirmStatus == 2){
                        _self.isShow = true;
                        _self.signature = true;
                        _self.sign = false;
                        if(!_self.cusPre.signatureAmount){
                            _self.cusPre.signatureAmount=0;
                        }
                    }else if(_self.cusPre.confirmStatus == 3){
                        _self.isShow = true;
                        _self.signature = false;
                        _self.sign = true;
                    }
                    if (_self.cusPre) {
                        var cusPre = _self.cusPre;
                        var commission = cusPre.commissionAmount;
                        if (commission) {
                            var commissionJson = JSON.parse(commission);
                            var commissionStr = "";
                            for (var jsonStr in commissionJson) {
                                if (commissionJson[jsonStr].typeValue) {
                                    commissionStr += commissionJson[jsonStr].name + " " + commissionJson[jsonStr].typeValue + "" + commissionJson[jsonStr].type + "  ";
                                }
                            }
                            cusPre.commissionAmount = commissionStr;
                        }
                    }

                    _self.customerInfo = body.resData.customerInfo || {};
                    _self.estateAdviser = body.resData.estateAdviser || {};
                    _self.repeatVisitFollow = body.resData.repeatVisitFollow || [];
                }, (response) => {
                    // console.log(response);
                });
                //约看信息

            },
            premisesDetail: function() {
                var _self = this;
                if (_self.cusPre.premisesDelFlag == '11') {
                    layer.alert("楼盘已被删除");
                } else {
                    this.$router.push({
                        name: 'premisesDetail',
                        params: {
                            premisesId: _self.cusPre.premisesId
                        }
                    });
                }
            },
            flowUpList: function() {
                //查询客户报备根基记录
                var _self = this;
                var listFlowUpData = {
                    customerPremisesId: _self.id
                };
                var url = this.utilHelper.apiUrl + "/api/getCPFollowList";
                var body = {};
                body.params = listFlowUpData;
                _self.$http.post(url, body).then((response) => {
                    _self.listFlowUp = response.body.resData.followList;
                }, (respones) => {
                    console.log(response);
                });
            },
            //获取图片列表
            getImages(id) {
                var _self = this;
                var url = this.utilHelper.apiUrl + '/file/getFiles.do';
                _self.$http.post(url, {
                    "id": id
                }).then((response) => {
                    var body = response.body;
                    if (body.result == 1) {
                        _self.fileList = body.resData;
                        var html = '';
                        for (var i = 0; i < _self.fileList.length; i++) {
                            html += '<li style="float: left;width: 84px;height: 84px;margin-right: 10px;">' +
                                '<img style="width:100%;height:100%;" src="' + _self.fileList[i].url + '"></li>';
                        }
                        $("#imgList").html(html);
                        $('#imgList').viewer();
                    }
                });
            },
            canel(){
                $("#cusPreDetailModal").modal("hide");
            },
            toCustomerInfo: function(id){
				$("#customerInfoModal").modal({
					backdrop: 'static',
					keyboard: false
				});
			}
        }
    }
</script>

<style scoped>
    .template-list:after {
        content: '';
        display: block;
        clear: both;
        visibility: hidden;
        overflow: hidden;
        font-size: 0;
        height: 0
    }
    .declare-follow-list {float: left;width: 100px;height: 80px;overflow: hidden;margin-left: 10px;position: relative;}
    .declare-follow-list img {width: 100%;height: 100%;}
    .declare-follow-list .mask-page {position: absolute;bottom: 0;left: 0;width: 100%;height: 20px;background-color: #000;opacity: 0.5;display: none;}
    .declare-follow-list .operation-btn {position: absolute;bottom: 0;left: 0;width: 100%;height: 20px;display: none;}
    .declare-follow-list .operation-btn a {color: #fff;line-height: 20px;text-align: center;width: 100%;display: inline-block;}
    .declare-follow-list:hover .mask-page {display: inline-block}
    .declare-follow-list:hover .operation-btn {display: inline-block}
    .concent_title{width: 600px;min-height:210px;float: left;margin: 5px 10px;border:1px solid #d7d7d7;}
    .info_list{margin-bottom: 0px;}
    .info_list li{margin-bottom: 5px;line-height:25px;}
    .concent_sub{float: left;width: 50%;}
    .modal-body{margin: 10px 0;height: 700px;overflow: scroll;}
</style>
